
<asset:javascript src="home/js/lib/jquery.jscroll.js" />
<%--<asset:javascript src="home/js/jquery.js"/>

--%>
 <script type="text/javascript">

  $(document).ready(function() {
		$('#khue').jscroll({
			loadingHtml : '<asset:image src="ajax-loader.gif" />',
			autoTrigger : true,
			padding: 20
			
		});
		
	});

  </script>
        <div id="khue"> 
        
		<g:each var="image" in="${listImages}" status="i">

			<figure
				class="image-square grid-quarter m-grid-third s-grid-half viewgrid"
				itemprop="associatedMedia" itemscope
				itemtype="http://schema.org/ImageObject">
				<a
					href="https://s3-ap-southeast-1.amazonaws.com/bkdncloudsharing/${image.getFilePath()+image.getFileName()}"
					itemprop="contentUrl" data-size="964x1024"> <img
					class="imagesquare"
					src="https://s3-ap-southeast-1.amazonaws.com/bkdncloudsharing/${image.getFilePath()+image.getFileName()}"
					itemprop="thumbnail" alt="Image description" />
				</a>

				<figcaption itemprop="caption description">
					${image.getFileName()}
				</figcaption>
			</figure>
		</g:each>

	<a href="/photo/test?offset=${offset}">More</a>
        </div>   
  

